<template>
  <div class="cart">
    <cart-nav-bar :goodsCount="goodsCount"/>
    <scroll class="content" ref="scroll">
      <cart-list :cartList="cartList" @checkedClick="checkedClick"
                 @decClick="decGoodsCount" @incClick="incGoodsCount"/>
    </scroll>
    <cart-bottom-bar v-if="goodsCount" :goodsIsAllChecked="goodsIsAllChecked" :total="goodsTotal"
                     :check-goods-count="checkGoodsCount" @allCheck="checkedAllGoods"/>
  </div>

</template>

<script>
import CartNavBar from './childCart/CartNavBar'
import CartList from './childCart/CartList'
import CartBottomBar from './childCart/CartBottomBar'

import Scroll from 'components/common/scroll/Scroll'

import {calc} from 'common/util'
import {mapState, mapMutations} from 'vuex'
import {
  CHECKED_GOODS_SELECTION,
  DEC_GOODS_COUNT,
  INC_GOODS_COUNT,
  CHECKED_ALL_GOODS_SELECTION,
} from '@/store/mutations_types'

export default {
  name: "Detect",
  components: {
    Scroll,
    CartList,
    CartNavBar,
    CartBottomBar,
  },
  computed: {
    ...mapState([
        'cartList'
    ]),
    goodsCount() {
      return this.cartList.length
    },
    checkGoodsCount() {
      return this.cartList.filter(item => item.checked).length
    },
    goodsIsAllChecked() {
      return this.checkGoodsCount == this.goodsCount && this.goodsCount != 0
    },
    goodsTotal() {
      let count = 0
      this.cartList.forEach(item => {
        if (item.checked) {
          count = calc.add(count, calc.mul(item.price, item.count))
        }
      })
      return count
    },
  },
  methods: {
    ...mapMutations([
        CHECKED_GOODS_SELECTION,
      DEC_GOODS_COUNT,
      INC_GOODS_COUNT,
      CHECKED_ALL_GOODS_SELECTION,
    ]),
    checkedClick(index) {
      this.CHECKED_GOODS_SELECTION(index)
    },
    decGoodsCount(index) {
      this.DEC_GOODS_COUNT(index)
    },
    incGoodsCount(index) {
      this.INC_GOODS_COUNT(index)
    },
    checkedAllGoods() {
      this.CHECKED_ALL_GOODS_SELECTION(!this.goodsIsAllChecked)
    }
  },
  activated() {
    this.$refs.scroll && this.$refs.scroll.refresh()
  },
}
</script>

<style scoped>
  .cart {
    height: 100vh;
  }

  .content {
    height: calc(100% - 44px - 49px - 49px);
  }

</style>
